import {useState} from "react";
import {Link} from "oh-router-react";
import {AccountService} from "@/apis/account.js";
export const Register = (props) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [repeat, setRepeat] = useState('');

    function onSubmitHandel(ev) {
        ev.preventDefault();
        console.log({password, email, repeat});
        AccountService.register({email, password,}).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }

    return (<article className="account-main flex-between">
        <div className="account-logo">
            <img src="http://116.62.219.88:2048/assets/login-left-CNbEJ55E.png" alt="account-logo"/>
        </div>
        <form className="im-form" onSubmit={onSubmitHandel}>
            <h3 className="account-title">晶盾物联网平台</h3>
            <p className="im-form-item flex-between">
                <label className="im-label" htmlFor="email"><i className="bi-envelope"></i> 邮箱</label>
                <input className="im-input" type="text" value={email} onChange={ev => setEmail(ev.target.value)}
                       placeholder="请输入邮箱"/>
            </p>
            <p className="im-form-item flex-between">
                <label className="im-label" htmlFor="email"><i className="bi-shield-lock"></i> 密码</label>
                <input className="im-input" type="password" value={password}
                       onChange={ev => setPassword(ev.target.value)} placeholder="请输入密码"/>
            </p>
            <p className="im-form-item flex-between">
                <label className="im-label" htmlFor="email"><i className="bi-shield-lock"></i> 密码</label>
                <input className="im-input" type="password" value={repeat}
                       onChange={ev => setRepeat(ev.target.value)} placeholder="再输入一次密码"/>
            </p>
            <p className="im-form-link flex-between">
                <button className="im-button-link" onClick={props.toggleLogin}>返回登录</button>
                <button className="im-button-link">
                    <Link to="/helper">忘记密码？</Link>
                </button>
            </p>
            <p className="im-form-submit">
                <button type="submit" className="im-button">
                    注册
                </button>
            </p>
            <p className="im-version">Version: 0.0.1023</p>
        </form>
    </article>)
}